<template>
  <div class="chart-item row1-center">
    <div class="chart-header">
      <h3>器具状态监控</h3>
    </div>
    <div class="chart-content">
      <div ref="statusChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'StatusChart',
  data() {
    return {
      chart: null,
      statusData: [
        { value: 65, name: '满箱', itemStyle: { color: '#67c23a' } },
        { value: 25, name: '空箱', itemStyle: { color: '#409eff' } },
        { value: 10, name: '异常', itemStyle: { color: '#f56c6c' } }
      ],
      totalCount: 100
    }
  },
  mounted() {
    this.initChart()
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.statusChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        this.setupChart()
        this.bindEvents()
      })
    },

    setupChart() {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '器具状态',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', '50%'],
            data: this.statusData,
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              scale: true,
              scaleSize: 5
            }
          }
        ],
        graphic: [
          {
            type: 'text',
            id: 'centerTitle',
            left: 'center',
            top:130,
            style: {
              text: '器具总数',
              textAlign: 'center',
              fill: '#666',
              fontSize: 14,
              fontWeight: 'normal'
            },
            z: 100
          },
          {
            type: 'text',
            id: 'centerValue',
            left: 'center',
            top:150,
            style: {
              text: this.totalCount.toString(),
              textAlign: 'center',
              fill: '#333',
              fontSize: 28,
              fontWeight: 'bold'
            },
            z: 100
          }
        ]
      }

      this.chart.setOption(option)
    },

    bindEvents() {
      // 鼠标悬停事件
      this.chart.on('mouseover', (params) => {
        if (params.componentType === 'series') {
          this.updateCenterDisplay(params.data.name, params.data.value, params.data.itemStyle.color)
        }
      })

      // 鼠标移出事件
      this.chart.on('mouseout', () => {
        this.resetCenterDisplay()
      })
    },

    updateCenterDisplay(name, value, color) {
      this.chart.setOption({
        graphic: [
          {
            id: 'centerTitle',
            style: {
              text: name,
              fill: color,
              fontSize: 16,
              fontWeight: '500'
            }
          },
          {
            id: 'centerValue',
            style: {
              text: value.toString(),
              fill: color,
              fontSize: 32,
              fontWeight: 'bold'
            }
          }
        ]
      })
    },

    resetCenterDisplay() {
      this.chart.setOption({
        graphic: [
          {
            id: 'centerTitle',
            style: {
              text: '器具总数',
              fill: '#666',
              fontSize: 14,
              fontWeight: 'normal'
            }
          },
          {
            id: 'centerValue',
            style: {
              text: this.totalCount.toString(),
              fill: '#333',
              fontSize: 28,
              fontWeight: 'bold'
            }
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
/* StatusChart组件特有样式 */
/* 主要样式已在父组件中统一定义 */
</style>
